<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.show"
    width="530px"
    custom-class="mydialog"
    append-to-body
    @close="handleClose"
  >
    <div class="dialog-content">
      <el-form ref="form1" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="当前出货仓：">{{ dialog.warehouseName }}</el-form-item>
        <el-form-item label="SKU名称：">{{ dialog.skuName }}</el-form-item>
        <el-form-item label="出库数量：">{{ dialog.amount }}</el-form-item>
        <el-form-item label="转仓：">
          <el-select v-model="form.type" placeholder="选择新的出货仓" class="seach-select" size="small">
            <el-option
              v-for="item in form.type_options"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="text-center mt-30">
        <el-button class="greenbt" type="primary" @click="transfer()">转仓</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { queryById, queryList, warehouseTransfer } from '@/api/pas/delivery'
export default {
  props: {
    modalStaticData: {
      type: Object,
      default: () => {}
    },
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {
        title: '',
        show: true,
        shipmentId: '',
        warehouseName: '',
        skuName: '',
        amount: ''
      },
      form: {
        type_options: [],
        type: ''
      },
      rules: {},
      search: {
        deteleFlag: 'N',
        shipmentId: '',
        warehouseId: '',
        isRange: 'ALL'
      }
    }
  },
  mounted() {
    // 基本信息
    this.dialog.title = '转仓'
    queryById(this.modalData.type)
      .then(response => {
        if (response.data.status === 'success') {
          this.dialog.shipmentId = response.data.data.data.shipmentId
          this.dialog.warehouseName = response.data.data.data.warehouseName
          this.dialog.skuName = response.data.data.data.skuName
          this.dialog.amount = response.data.data.data.amount
        }
      })
      .catch(error => {
        console.log(error)
      })
    // 仓库加载
    queryList(this.search)
      .then(response => {
        if (response.data.status === 'success') {
          this.form.type_options = response.data.data.list
          if (this.form.type_options) {
            for (
              let index = 0;
              index < this.form.type_options.length;
              index++
            ) {
              if (this.form.type_options[index].warehouseName === '中转仓') {
                this.form.type_options[index].disabled = true
              } else {
                this.form.type_options[index].disabled = false
              }
            }
          }
        }
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    handleClose() {
      this.$emit('close')
      this.modalStaticData.closeChildAndRefresh()
    },
    // 转仓
    transfer() {
      this.search.shipmentId = this.dialog.shipmentId
      this.search.warehouseId = this.form.type
      warehouseTransfer(this.search)
        .then(response => {
          this.handleClose()
          if (response.data.status === 'success') {
            this.$message({
              message: response.data.messge,
              type: 'success'
            })
          } else {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
        .finally(() => {
          this.modalStaticData.closeChildAndRefresh()
        })
    }
  }
}
</script>
